<template>
	<view>
		<!-- 预约订单类型 -->
		<u-sticky bgColor="#fff">
			<u-tabs
				:list="list"
				lineWidth="40"
				:scrollable="false"
				@change="SelectProject"
				:current="current"
			></u-tabs>
		</u-sticky>

		<!-- 订单列表 -->
		<view class="orders" v-if="prolist.length > 0">
			<view class="order-item" v-for="(item, index) in prolist" :key="index">
				<view><text>预约项目：</text>{{ item.project.name }}</view>
				<view><text>预约时间：</text>{{ item.createtime }}</view>
				<view><text>预约状态：</text>{{ item.status_text }}</view>
				<view v-if="item.price"> <text>费用：</text>{{ item.price }}元 </view>
				<view class="action">
					<u-button @click="ToInfo(item.id)" class="item" type="primary" size="mini">详情</u-button>

					<!-- 商家已接单(已报价) -->
					<u-button
						@click="ToPay(item.id)"
						v-if="item.status == 1"
						class="item"
						type="success"
						size="mini"
					>
						确认支付</u-button
					>

					<!-- 已支付、未服务 -->
					<u-button
						@click="ToCancel(item.id)"
						v-if="item.status == 2"
						class="item"
						type="error"
						size="mini"
					>
						撤销预约</u-button
					>

					<!-- 已服务、未评价 -->
					<u-button
						@click="ToRate(item.id)"
						v-if="item.status == 3 && !item.rate"
						class="item"
						type="warning"
						size="mini"
						>评分</u-button
					>
				</view>
			</view>
		</view>
		<!-- 消息提示的组件 -->
		<u-toast ref="uToast"></u-toast>

		<!-- 模态框确认删除 -->
		<u-modal
			:show="showdel"
			showCancelButton
			:content="content"
			@confirm="confirm"
			ref="uModal"
			@cancel="showdel = false"
		></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					{
						name: '全部',
						status: '',
					},
					{
						name: '未接单',
						status: 0,
					},
					{
						name: '已接单',
						status: 1,
					},
					{
						name: '已付款',
						status: 2,
					},
					{
						name: '已完成',
						status: 3,
					},
					{
						name: '撤销预约',
						status: -1,
					},
				],
				prolist: [],
				LoginUser: null,
				proid: null,
				current: 0,
				showdel: false,
				content: '是否确认撤销订单？',
				id: null,
			};
		},
		onLoad() {
			//验证是否有登陆
			this.$u.auth.check();

			this.LoginUser = uni.getStorageSync('LoginUser');

			this.projectlist();
		},
		methods: {
			SelectProject(val, index) {
				this.proid = val.status;
				this.current = index;
				this.projectlist();
			},

			async projectlist() {
				let data = {
					userid: this.LoginUser.id,
					status: this.proid,
				};
				let resutl = await this.$u.api.project.ProjectIndex(data);

				if (resutl.code == '1') {
					this.prolist = resutl.data;
				} else {
					this.$refs.uToast.show({
						type: 'error',
						message: resutl.msg,
					});

					return false;
				}
			},
			// 支付
			async ToPay(id) {
				let data = {
					id: id,
					userid: this.LoginUser.id,
				};
				let resutl = await this.$u.api.project.ProjectPay(data);
				if (resutl.code == '1') {
					this.$refs.uToast.show({
						type: 'success',
						message: resutl.msg,
					});
					this.projectlist();
				} else {
					this.$refs.uToast.show({
						type: 'error',
						message: resutl.msg,
					});

					return false;
				}
			},
			ToCancel(id) {
				this.id = id;
				this.showdel = true;
			},
			async confirm() {
				this.showdel = false;
				let data = {
					id: this.id,
					userid: this.LoginUser.id,
				};
				let resutl = await this.$u.api.project.ProjectRevoke(data);
				if (resutl.code == '1') {
					this.$refs.uToast.show({
						type: 'success',
						message: resutl.msg,
					});
					this.projectlist();
				} else {
					this.$refs.uToast.show({
						type: 'error',
						message: resutl.msg,
					});

					return false;
				}
			},
			// 跳转到评分页面
			ToRate(id) {
				uni.$u.route({
					url: 'pages/project/rate',
					params: {
						id: id,
					},
				});
			},
			ToInfo(id) {
				uni.$u.route({
					url: 'pages/project/info',
					params: {
						id: id,
					},
				});
			},
		},
	};
</script>

<style>
	/* pages/myOrder/myOrder.wxss */
	page {
		background-color: rgb(247, 247, 247);
		font-size: 34rpx;
	}

	.myorder {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding-left: 30rpx;
	}

	.myorder text {
	}

	.myorder view {
		height: 2rpx;
		background-color: #ccc;
		width: auto;
	}

	.order-item {
		padding: 20rpx 20rpx;
		margin: 30rpx 0rpx;
		border-bottom: 2rpx solid #cccccc;
		box-shadow: 0 0 10px #ddd;
	}

	.order-item text {
		font-size: 32rpx;
	}

	.order-item .action {
		text-align: right;
		margin-top: 1em;
	}

	.order-item .action button {
		margin-right: 0.5em !important;
		width: 20% !important;
		display: inline-block;
		height: 26px;
		line-height: 26px;
	}

	.u-tabs__wrapper__nav__item__text {
		white-space: nowrap;
	}
</style>
